
document.querySelectorAll("input").checked=function(){
  this.style.color=red;
}

/*
     1、加减按钮 点击 导致金额改变
     2、当勾选 某一个商品之后 需要计算 总金额
     3、当删除 某一个商品之后  需要计算总金额
 */
// 通过事件委托绑定点击事件

// 金额显示.00格式函数封装
function NumFormat(value) {
  if (!value) return '0.00'
  value = value.toFixed(2)
  var intPart = Math.trunc(value) // 获取整数部分
  var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1') // 将整数部分逢三一断
  var floatPart = '.00' // 预定义小数部分
  var value2Array = value.split('.')
  // =2表示数据有小数位
  if (value2Array.length === 2) {
    floatPart = value2Array[1].toString() // 拿到小数部分
    if (floatPart.length === 1) {
      return intPartFormat + '.' + floatPart + '0'
    } else {
      return intPartFormat + '.' + floatPart
    }
  } else {
    return intPartFormat + floatPart
  }
}

// 构造函数priceTotal()计算被勾选的商品的总金额是多少 以及被选中的商品的总件数
function priceTotal() {
  let total = 0;
  let per = 0;
  // 根据查找的被勾选的input框进行遍历
  document.querySelectorAll(".input:checked").forEach(item => {
    total += Number(item.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML.trim());

    per += Number(item.parentElement.nextElementSibling.nextElementSibling.firstElementChild
      .nextElementSibling.innerHTML.trim())//trim()去掉空格
  })
  document.querySelectorAll('.buy>span')[0].innerHTML = per;
  document.querySelectorAll('.buy>span')[1].innerHTML =  total+' 元' 
}


// 截取到地址栏的ID和商品名 来进行网页dom显示
const userId = getUrlParam("userId")

// 获取用户下的购物车数据
// function init() {
ajax({
  url: "http://phpclub.org.cn:8080/api/cart/lists",
  data: {
    userId
  },
  success: function (response) {
    console.log(response.data);

    // 显示购物车数据
    let html = ''
    response.data.forEach(item => {
      html += ` <tr class="commodity" id="${item.id},${item.goodsId}">
                <th><input type="checkbox" class="input select"></th>
                <th class="content nav1" ><img src="${item.goods.goodsImg}" width="100px" height="100px">
                  <p style="width:120px">${item.goods.goodsName} </p>
                </th>
                <th><button class='subBtn' >
                    -
                  </button> <span class="spanNumber" >
                    ${item.goodsCount}
                  </span> <button class='addBtn'>
                    +
                  </button></th>
                <th>
                  ${item.goods.marketPrice}
                </th>
                <th class="money">
                ${NumFormat(item.goods.marketPrice * item.goodsCount)}
                </th>
                <th><span class="glyphicon glyphicon-remove">删除
                  </span></th>
              </tr>`
    });
    document.querySelector('.tbody').innerHTML = html;
  }
})

/*
    1、加减按钮 点击 导致金额改变
    2、当勾选 某一个商品之后 需要计算 总金额
    3、当删除 某一个商品之后  需要计算总金额
*/
// 通过事件委托绑定点击事件
document.querySelector(".shoppingBar").addEventListener("click", function (event) {
  // 增加数量
  if (event.target.nodeName == 'BUTTON') {
    // 点击加号事件委托开始
    if (event.target.innerHTML.trim() == "+") {
      // 获取当前数量
      let number = event.target.previousElementSibling.innerHTML.trim();
      number++;

      // 修改数量innerHTML
      event.target.previousElementSibling.innerHTML = number;
      // 增加商品数量数据交互
      let Ids = event.target.parentElement.parentElement.id;//事件委托抓到tr
      let cartId = Ids.split(",")[0];
      let goodsId = Ids.split(",")[1];
      console.log(cartId, goodsId);
      ajax({
        url: 'http://phpclub.org.cn:8080/api/cart/change',
        type: "post",
        data: {
          userId,
          cartId: cartId,
          goodsId: goodsId,
          goodsCount: number
        },
        success: function (response) {
          console.log(response.data);
        }
      })

      // 商品单价
      let price = event.target.parentElement.nextElementSibling.innerHTML.trim() - 0;
      // 小计金额
      event.target.parentElement.nextElementSibling.nextElementSibling.innerHTML = NumFormat(price * number);
      priceTotal()

    }

    // 点击减号事件委托开始
    else if (event.target.innerHTML.trim() == "-") {
      // 获取当前数量
      // 减少数量
      let number = event.target.nextElementSibling.innerHTML.trim();
      if (number <= 1) {
        alert("最少选择一件")
        return;
      }
      number--;

      // 减少商品数量数据交互
      let Ids = event.target.parentElement.parentElement.id;
      let cartId = Ids.split(",")[0];
      let goodsId = Ids.split(",")[1];
      console.log(cartId, goodsId);
      ajax({
        url: 'http://phpclub.org.cn:8080/api/cart/change',
        type: "post",
        data: {
          userId,
          cartId: cartId,
          goodsId: goodsId,
          goodsCount: number
        },
        success: function (response) {
          console.log(response.data);
        }
      })

      // 修改数量innerHTML
      event.target.nextElementSibling.innerHTML = number;
      // 捕捉单价，修改小计金额
      let price = event.target.parentElement.nextElementSibling.innerHTML.trim() - 0;
      event.target.parentElement.nextElementSibling.nextElementSibling.innerHTML = NumFormat(price * number);
      priceTotal()
    }
  }

  // 数量改变结束

  // 全选框事件
  else if (event.target.nodeName == 'INPUT') {
    // 如果点的是全选框，让下面三个框都选中

    if (event.target.className == "selectAll") {
      document.querySelectorAll(".input").forEach(item => {
        item.checked = document.querySelector(".selectAll").checked;
        // console.log(this);
        // console.log(item);
        // console.log(111);
      })
      priceTotal()
    } else {
      // console.log(234)
      document.querySelector('.selectAll').checked = (document.querySelectorAll('.input').length ==
        document.querySelectorAll('.input:checked').length);
      priceTotal();
    }


  }

  // 删除商品
  else if (event.target.innerHTML.trim() == "删除") {
    // console.log(720);
    document.querySelector('.tbody').removeChild(event.target.parentElement.parentElement);
    let Ids = event.target.parentElement.parentElement.id;
    let cartId = Ids.split(",")[0];
    // let goodsId = Ids.split(",")[1];
    console.log(cartId);
    ajax({
      url: "http://phpclub.org.cn:8080/api/cart/remove",
      data: {
        cartId,
        userId
      },
      success: function (response) {
        console.log(11);
        console.log(response);
      }
    })

    priceTotal();
  }

  // 清空购物车
  else if(event.target.innerHTML.trim() == "清空购物车"){
    console.log(4);
    
    console.log(666);
    
    ajax({
      url:"http://phpclub.org.cn:8080/api/cart/clear",
      data:{
        userId
      },
      success:function(response){
        console.log(720);

      }
    })
document.querySelector(".tbody").innerHTML=''
  }
})
// 继续购物返回首页
document.querySelector(".return").onclick = function () {
  location.href = "index.html"
}
// 去结算跳转订单页
document.querySelector("#go").onclick=function(){
  location.href="buy.html"
}

// 构造函数priceTotal()计算被勾选的商品的总金额是多少 以及被选中的商品的总件数
function priceTotal() {
  let total = 0;
  let per = 0;
  // 根据查找的被勾选的input框进行遍历
  document.querySelectorAll(".input:checked").forEach(item => {
    total += Number(item.parentElement.nextElementSibling.nextElementSibling.nextElementSibling
      .nextElementSibling.innerHTML.trim());
    per += Number(item.parentElement.nextElementSibling.nextElementSibling.firstElementChild
      .nextElementSibling.innerHTML
      .trim())
  })
  document.querySelectorAll('.buy>span')[0].innerHTML = per;
  document.querySelector(".totalPrice").innerHTML =  NumFormat(total) 
}
